
    <form class="layui-form" action="">
        <div class="layui-row" style="padding-top: 10px">
            <div class="layui-col-lg6">
                <label class="layui-form-label">机器IP:</label>
                <div class="layui-input-block">
                    <select id="ipAddress">
                    {{range $key, $value := . }}
                        <option value="{{$key}}">{{$value}}</option>
                    {{end}}

                    </select>
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">时间段:</label>
                <div class="layui-input-block">
                    <select id="timeBeginAndEnd">
                        <option value="1" selected="selected">近1一个小时</option>
                        <option value="5">近5一个小时</option>
                        <option value="8">近8一个小时</option>
                        <option value="0">今天</option>
                        <option value="-1">昨天</option>
                    </select>
                </div>
            </div>
        </div>
    </form>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<center>
    <div id="main" style="width: 1000px;height:400px;"></div>
</center>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    var option = {
        color: colors,
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['CPU', '内存']
        },
        grid: {
            top: 70,
            bottom: 30
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '内存  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return 'CPU  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name:'CPU',
                type:'line',
                xAxisIndex: 1,
                smooth: true,
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 282.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'内存',
                type:'line',
                smooth: true,
                data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    var $
    layui.use(['jquery'], function () {
        $=layui.jquery

    })
    function findPerformanceMonitor() {
        $.ajax({
            type:'POST',
            url: '/monitor/find/performance/monitor/info',
            data:{
                ipAddress:$("#ipAddress").val(),
                timeBeginAndEnd:$("#timeBeginAndEnd").val()

            },
            dataType: 'json',
            success: function (data) {
                option.xAxis[0].data = data.updateTimes
                option.xAxis[1].data = data.updateTimes
                option.series[0].data = data.cpus
                option.series[1].data = data.memorys
                myChart.setOption(option)
            }
        });
    }
    findPerformanceMonitor()
    window.setInterval("findPerformanceMonitor()",12000)
</script>